<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
</head>
<body>
<!-- 全局组件 -->
<!--<div id="app">
   <component-add-minus></component-add-minus>
</div>
<p></p>
&lt;!&ndash; 局部组件 &ndash;&gt;
<div id="app1">
   <z-j></z-j>
</div>
<p></p>

&lt;!&ndash; 组件嵌套 &ndash;&gt;
<div  id="app2"><a-c></a-c></div>

<div id="app3">
    <local-component-a></local-component-a>
</div>-->

<!-- 父组件向子组件传值 -->
<!--<div id="app4">
    <local-component-a :param="msg"></local-component-a>
</div>-->
<p></p>
 <!-- 子组件向父组件传值 -->
<div id="app5" >
   <local-component-a v-on:value="receiveChildMsg"></local-component-a>
    {{msg}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    <!-- 全局组件 -->
    Vue.component("component-add-minus",{
        template: `<div>
        <button @click="add()">自增</button>
        <span>{{count}}</span>
        <button @click="minus()">自减</button>
        </div>`,
        data(){
            return {
              count: 0
            }
        },
        methods: {
            add: function (){
               this.count++;
            },
            minus: function (){
               this.count--;
            }
        }
    })

    Vue.component('a-a', {
        template: "<div>aa</div>"
    })

    Vue.component('a-b', {
        template: "<div>ab</div>"
    })

    Vue.component('a-c', {
        template: `<div><a-a></a-a><a-b></a-b></div>`
    })

    let vm = new Vue({
        el:"#app"
    })

    let vm1 = new Vue({
        el: "#app1",
        // 局部组件
        components: {
            "z-j": {
                template: `<div><button @click="add1()">自增</button><spam>{{msg}}</spam></div>`,
                data() {
                    return {
                        msg: 0
                    }
                },
                methods: {
                    add1: function (){
                        this.msg++;
                    }
                }
            }
        }
    })

    let vm2 = new Vue({
        el: "#app2"
    })

    let vm3 = new Vue({
        el: "#app3",
        components: {
            "local-component-a": {
                template: `<div><p>局部套全局</p><a-a></a-a></div>`
            },

        }
    })

   // 父组件向子组件传值
    let vm4 = new Vue({
        el: "#app4",
        data: {
            msg: "199"
        },
        components: {
            "local-component-a": {
                template: `<div><h1>{{param}}</h1></div>`,
                props: ["param"]

            }
        }
    })

    let vm5 = new Vue({
        el: "#app5",
        data: {
            msg: "来自父组件：19999"
        },
        components: {
            "local-component-a": {
                template: `<button @click="parseParent">点击传值</button>`,
                data(){
                    return {
                        parentMsg: ''
                    }
                },
                methods: {
                    parseParent: function (){
                        this.$emit("value","子组件向父组件传值")
                    }
                }
            }
        },
        methods: {
            receiveChildMsg: function (e){
                console.log(e);
                this.msg = e;
            }
        }
    })

</script>


</body>
</html>